import { Link } from "react-router-dom";
import { Button } from 'antd'; // 引入 Ant Design 的 Button 组件
import { useEffect, useRef } from "react";

/**
 * Home 页面组件
 * 
 * 该组件展示了一个简单的首页，包含 Ant Design 按钮、文本描述、一个固定宽度的容器，
 * 以及一个跳转到列表页的链接。此外，还使用 canvas 绘制了一个红色矩形。
 * 
 * @returns {JSX.Element} 返回 Home 页面的 JSX 元素
 */
function Home() {
  // 获取 canvas 元素的引用
  const canvasRef = useRef<HTMLCanvasElement>(null);
  // 用于存储动画帧引用，便于清理
  const animationRef = useRef<number>(0);
  // 存储矩形的 x 坐标位置，用于动画
  const rectX = useRef<number>(10); // 初始x坐标

  // 初始化 canvas 并绘制红色矩形
  useEffect(() => {
    // 获取 canvas 元素
    const canvas = canvasRef.current;
    // 安全检查：如果 canvas 不存在则返回
    if (!canvas) return;
    
    // 设置 canvas 的实际尺寸
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    
    // 获取 2D 绘图上下文
    const ctx = canvas.getContext('2d');
    // 检查绘图上下文是否存在
    if (!ctx) return;

    // 动画函数：负责每帧的绘制和更新
    const animate = () => {
      // 清除画布内容，为下一帧做准备
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // 绘制红色矩形
      ctx.fillStyle = 'red';
      ctx.fillRect(rectX.current, 10, 100, 100);
      
      // 更新矩形的 x 坐标，实现移动效果
      rectX.current += 2; // 每帧移动2像素
      
      // 边界检查 - 当矩形完全移出右侧时，重置到左侧
      if (rectX.current > canvas.width) {
        rectX.current = -100; // 矩形宽度为100
      }
      
      // 请求下一帧动画
      animationRef.current = requestAnimationFrame(animate);
    };

    // 启动动画循环
    animationRef.current = requestAnimationFrame(animate);

    // 清理函数：组件卸载时取消动画帧，防止内存泄漏
    return () => {
      cancelAnimationFrame(animationRef.current);
    };
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div className="p-10">
      <Button type="primary" className="mb-4">Ant Design 按钮</Button>
      <h1 className="text-[24px] font-bold mb-4">首页</h1>
      <p className="mb-6 text-[16px]">这是使用 Tailwind CSS 和 px-to-viewport 构建的页面</p>
      <div className="w-[375px] h-[200px] bg-blue-500 flex items-center justify-center mb-6">
        <span className="w-[375px] text-white text-18px">这是一个 375px 宽的容器</span>
      </div>
      <Link to="/list" className="text-blue-500 hover:text-blue-700 underline">
        访问列表页面
      </Link>
      <canvas ref={canvasRef} className="w-full h-[400px] bg-green-500 flex items-center justify-center mt-6">
      </canvas>
    </div>
  );
}

export default Home;